<template>
  <view class="normal-login-container">
    <view class="item-wrap">


      <uni-forms ref="ruleForm" :model="ruleForm" labelWidth="auto" :label-position="boole ? 'top' : 'left'">
        <view class="lineBottom10">
          <uni-section :title="title" type="line"/>
        </view>

        <view style="margin: 8rpx 20rpx 8rpx 20rpx">
          <uni-forms-item label="车牌号:" name="carNo" :required="boole"
                          :rules="[{ required: true, errorMessage: '请选择车牌号', validateTrigger: 'bind' }]">
            <text class="carNo"/>
            <uni-easyinput type="text" v-if="boole" v-model="ruleForm.carNo" @focus="handleFocus" :readonly="true"
                           @clear="clear"
                           :placeholder="placeholder"/>
            <text v-else>{{ ruleForm.carNo || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车架号:">
            <uni-easyinput v-model="ruleForm.vinNo" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.vinNo || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="品牌:">
            <uni-easyinput v-model="ruleForm.brandName" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.brandName || '-' }}</text>
          </uni-forms-item>
          <uni-forms-item label="车系:">
            <uni-easyinput v-model="ruleForm.seriesName" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.seriesName || '-' }}</text>
          </uni-forms-item>
          <uni-forms-item label="车型:">
            <uni-easyinput v-model="ruleForm.modelName" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.modelName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆产权:">
            <uni-easyinput v-model="ruleForm.propertyRightName" disabled v-if="boole"
                           placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.propertyRightName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="登记日期:">
            <uni-easyinput v-model="ruleForm.registerTime" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.registerTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车龄:">
            <uni-easyinput v-model="ruleForm.carAge" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.carAge || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="排放标准:">
            <uni-easyinput v-model="ruleForm.environmentalStandards" disabled v-if="boole"
                           placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.environmentalStandards || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="燃油类型:">
            <zxz-uni-data-select v-model="ruleForm.fuelType" dataKey="label" dataValue="value" disabled v-if="boole"
                                 :localdata="dict.type.fuel_type"/>
            <text v-else>{{ handleLabel(dict.type.fuel_type, ruleForm.fuelType) || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="排量:">
            <uni-easyinput v-model="ruleForm.liter" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.liter || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="座位数:">
            <uni-easyinput v-model="ruleForm.seatNum" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.seatNum || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="档位:">
            <uni-easyinput v-model="ruleForm.gearPosition" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.gearPosition || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="颜色:">
            <uni-easyinput v-model="ruleForm.exteriorColor" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.exteriorColor || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="上三年出险金额(元):">
            <uni-easyinput v-model="ruleForm.accidentAmountThreeYears" disabled v-if="boole"
                           placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.accidentAmountThreeYears || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="指导价(元):">
            <uni-easyinput v-model="ruleForm.guidancePrice" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.guidancePrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="采购价(元):">
            <uni-easyinput v-model="ruleForm.purchasePrice" disabled v-if="boole" placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.purchasePrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="初期残值(元):">
            <uni-easyinput v-model="ruleForm.initialResidualValue" disabled v-if="boole"
                           placeholder="请选择车辆后自动带出"/>
            <text v-else>{{ ruleForm.initialResidualValue || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="公里数:" name="mileage" :required="boole"
                          :rules="[{ required: true, errorMessage: '请输入公里数', validateTrigger: 'bind' }]">
            <text class="mileage"/>
            <uni-easyinput v-model="ruleForm.mileage" v-if="boole" @change="handleChange('mileage')"
                           placeholder="请输入公里数"/>
            <text v-else>{{ ruleForm.mileage || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="过户次数:" name="transferCount" :required="boole"
                          :rules="[{ required: true, errorMessage: '请输入过户次数', validateTrigger: 'bind' }]">
            <text class="transferCount"/>
            <uni-easyinput v-model="ruleForm.transferCount" v-if="boole"
                           @change="handleTransferCount"
                           placeholder="请输入过户次数"/>
            <text v-else>{{ ruleForm.transferCount || 0 }}</text>
          </uni-forms-item>

          <uni-forms-item label="车况等级:" name="vehicleConditionLevel" :required="boole"
                          :rules="[{ required: true, errorMessage: '请选择车况等级', validateTrigger: 'bind' }]">
            <text class="vehicleConditionLevel"/>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.vehicleConditionLevel" dataKey="label" dataValue="value"
                                 :localdata="dict.type.vehicle_condition_level_type"/>
            <text v-else>
              {{ handleLabel(dict.type.vehicle_condition_level_type, ruleForm.vehicleConditionLevel) || '-' }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="车辆停放城市:" name="cityName" :required="boole"
                          :rules="[{ required: true, errorMessage: '请输入车辆停放城市', validateTrigger: 'bind' }]">
            <text class="mileage"/>
            <uni-easyinput v-model="ruleForm.cityName" v-if="boole" placeholder="请输入车辆停放城市"/>
            <text v-else>{{ ruleForm.cityName || '-' }}</text>
          </uni-forms-item>
        </view>

        <view class="lineBottom10">
          <uni-section title="处置信息" type="line"/>
        </view>

        <view style="margin: 8rpx 20rpx 8rpx 20rpx">

          <uni-forms-item label="处置原因:" name="disposalReason" :required="boole"
                          :rules="[{ required: true, errorMessage: '请输入处置原因', validateTrigger: 'bind' }]">
            <text class="disposalReason"/>
            <uni-easyinput type="textarea" v-if="boole" :maxlength="500" v-model="ruleForm.disposalReason"
                           placeholder="请输入处置原因"/>
            <text v-else>{{ ruleForm.disposalReason || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆异常:" name="vehicleStatus" :required="boole"
                          :rules="[{ required: true, errorMessage: '请输入车辆异常', validateTrigger: 'bind' }]">
            <text class="vehicleStatus"/>
            <uni-easyinput type="textarea" v-if="boole" v-model="ruleForm.vehicleStatus" :maxlength="500"
                           placeholder="请输入车辆异常"/>
            <text v-else>{{ ruleForm.vehicleStatus || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="附件:">
            <image-common :disabled="!boole" :up-type="2" v-model="ruleForm.attachment"/>
          </uni-forms-item>

        </view>

      </uni-forms>

    </view>

    <!--弹框-->
    <carPopup ref="refCarPopup" @change="change"/>
  </view>
</template>

<script>
import carPopup from './carPopup.vue'

export default {
  name: 'newApplication',
  dicts: ['vehicle_condition_level_type', 'fuel_type', 'car_nature'],
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '申请信息',
    },
  },
  components: {carPopup},
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', {...target, [key]: value})
            return true
          },
        })
        return proxy
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    handleLabel() {
      return function (arr, type) {
        let name = ''
        arr.map((v) => {
          if (type == v.value) {
            name = v.label
          }
        })
        return name
      }
    },
  },
  watch: {},
  data() {
    return {
      placeholder: '请选择车牌号',
      isFocus: false
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    change(val) {
      if (!val) return
      this.placeholder = '请选择车牌号'
      let objList = [
        'carId', 'carNo', 'vinNo', 'brandId', 'seriesId', 'modelId', 'brandName',
        'modelName', 'seriesName', 'propertyRightId', 'propertyRightName', 'registerTime', 'carAge', 'environmentalStandards',
        'licenseNature', 'fuelType', 'liter', 'seatNum', 'gearPosition', 'exteriorColor', 'carType',
        'accidentAmountThreeYears', 'guidancePrice', 'purchasePrice', 'initialResidualValue',
      ]
      for (let key of objList) {
        this.$set(this.ruleForm, key, val[key] || '')
        this.$set(this.value, key, val[key] || '')
      }
    },

    handleFocus() {
      this.placeholder = ''
      this.$refs.refCarPopup.open()
    },

    clear() {
      this.placeholder = '请选择车牌号'

    },

    handleChange(str) {
      let regex = /^[1-9]\d*$/;
      if (!regex.test(this.ruleForm[str])) {
        this.ruleForm[str] = ''
      } else {
        this.ruleForm[str] = this.ruleForm[str]
      }
    },

    handleTransferCount(val) {
      let regex = /^(0|[1-9]\d*)$/;
      if (!regex.test(val)) {
        this.value.transferCount = this.ruleForm.transferCount = ''
      } else {
        this.value.transferCount = this.ruleForm.transferCount = val
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
            .validate()
            .then((res) => {
              resolve()
            })
            .catch((err) => {
              let key = '.flex-col' + '>>>' + '.' + err[0].key
              reject(key)
            })
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
